﻿
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />   @* 一 ①样式 *@ @* ②layui js库 *@
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>


<style>

    .layui-form-label {
        width: 90px;
    }
</style>

<h2>酒店预定</h2>

<table class="layui-table">
    <tr>
        <td>
            <B>预定信息</B>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">日期范围</label>
                    <div class="layui-inline" id="ID-laydate-rangeLinked">
                        <div class="layui-input-inline">
                            <input type="text" autocomplete="off" id="ID-laydate-start-date-1" class="layui-input" placeholder="入住日期">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" autocomplete="off" id="ID-laydate-end-date-1" class="layui-input" placeholder="离开日期">
                        </div>
                    </div>
                </div>
            </div>
            房间数量
            <select id="SelectRoomCount" onchange="getWanshu()">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>

            <br />
            <br />

            <b>入住信息</b>

            <br />
            <br />
            联系人  <input type="text" id="userName" value="" />
            手机号  <input type="text" id="phone" value="" />
            <br />
            <b>人脸上传</b>
            <input type="type" id="ImgUrl" value="" hidden />

            <div class="layui-upload">
                <button type="button" class="layui-btn" id="ID-upload-demo-btn-2">
                    <i class="layui-icon layui-icon-upload"></i> 上传人脸图片
                </button>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
                    预览图：
                    <div class="layui-upload-list" id="upload-demo-preview"></div>
                </blockquote>
            </div>

            <br />
            <input type="checkbox" id="isSame" /> 入住人和联系人相同(*友情提示:会员本人入住时，享会员权益)
            <br />
            特殊需求:
            <input type="checkbox" value="无烟房" name="teshu" />无烟房
            <input type="checkbox" value="高层客房" name="teshu" />高层客房
            <input type="checkbox" value="相邻房" name="teshu" />相邻房
            <input type="checkbox" value="备注" name="teshu" />备注
            <br /> <br />
            <textarea id="note"></textarea>
            <br />
            <b>支付与优惠信息</b>
            支付方式 <input type="radio" name="payment" value="门店到付" />门店到付
            <input type="radio" name="payment" value="支付全部房费" />支付全部房费


        </td>
        <td style="vertical-align:top">
            <img id="roomtypeImg" src="~/imgs/3931a0a3-44a3-4b24-a834-3869f170307f2.png" style="width:400px;height:300px;min-height:300px;min-width:400px" />
          <br />
          <br />
            <b  id="hotelname" style="font-size:26px;color:black;"> xxxx大酒店 </b>
            <br />
            地址:<span  id="address" >xxx市xxx镇南口</span>
            <br />
            <b>入住房型</b> <br />

            <span id="roomtypeName">标准间-房型名称</span>  <span id="roomCount">8</span>间
            <br />
            <b>价格名称</b> <br />
            <span id="roomName">总统666-房间名称</span>
            <br />
            <b>入住日期</b> <br />
            <span id="ruzhuriqi"> 2024-9-25至2024-10-25 </span> <span id="wanshu">25</span>晚
            <br />
            <br />

            房费小计     <span> ￥</span><span id="price" style="ont-size:26px;">260</span><br />
            房费总计     <span style="color:red">  ￥</span><span id="totalprice" style="color:red;font-size:26px;">260</span><br />

            <button type="button" onclick="submitOrder()" class="layui-btn layui-btn-fluid">提交订单</button>

            <input type="checkbox" id="agree" />已阅读并同意<<智慧酒店的协议 >>

        </td>
    </tr>
</table>

<script>

    $(function () {
        Rili();
        TPSC();
        LoadRoomInfo();
        LoadHotelInfo();

        $("#userName").val(Cookies.get("username")); //直接把用户名赋值给联系人姓名
    });

    //全局变量
    var wanshu = 0; //晚数
    var roomCount = 0;//房间数
    var roomId = localStorage["roomid"];// localStorage["roomid"] = id;
    var roomTypeId = 0;
    var price = 0;//单价
    var ZongJia = 0;//总价
    var roomName = "";

    function JiSuanZongjia() { 
         ZongJia = (wanshu * roomCount * price).toFixed(2);//结果取两位小数
        $("#totalprice").html(ZongJia);
    }

    //通过ajax 调用roomid对应的房间信息
    function LoadRoomInfo() { 
    
        $.ajax({
            url: 'https://localhost:7061/api/RoomInfo/GetRoomInfoById?id=' + roomId,
            type:'get',
            async:false,
            success: function (res) {
                console.log(res);
                roomTypeId = res.roomTypeId; //房型id
                $("#roomName").html(res.roomName);
                $("#price").html(res.price);
                price = res.price;
                roomName = res.roomName;
                JiSuanZongjia();
                LoadRoomType(roomTypeId);  //加载房型信息
            }
        });
    }

    function LoadRoomType(roomTypeId) {

        $.ajax({
            url: 'https://localhost:7061/api/RoomType/GetRoomTypeById?id=' + roomTypeId,
            type: 'get',
            async: false,
            success: function (res) {
                console.log(res);
                $("#roomtypeImg").attr("src", res.imgUrl);
                $("#roomtypeName").html(res.name);
            }
        });
    }

    function LoadHotelInfo() {
        $.ajax({
            url: 'https://localhost:7061/api/HotelInfo/GetHotelInfoById?id=1' ,
            type: 'get',
            async: false,
            success: function (res) {
                $("#hotelname").html(res.name);
                $("#address").html(res.address);
            }
        });
    }
     

    function Rili() {
        var laydate = layui.laydate;
        // 日期范围 - 左右面板联动选择模式
        laydate.render({
            elem: '#ID-laydate-rangeLinked',
            range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
            rangeLinked: true, // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
            done: function (value, date, endDate) {
                // console.log(value); // 日期字符，如： 2017-08-18
                // console.log(date); // 包含年月日时分秒各项值的对象
                // console.log(endDate); // 结束日期时间对象，当设置 range 时才会返回。对象成员同上。

                $("#ruzhuriqi").html(value);

                var begin = moment(date).format('YYYY-MM-DD');//取开始时间
                var end = moment(endDate).format('YYYY-MM-DD');//取结束时间

                wanshu = moment(endDate).diff(moment(date), "days");
                JiSuanZongjia();
                $("#wanshu").html(wanshu);
               

            }
        });
    }


    function TPSC() {
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;
        // 多图片上传
        upload.render({
            elem: '#ID-upload-demo-btn-2',
            url: '/home/TPSP', // 实际使用时改成您自己的上传接口即可。
            multiple: true,
            before: function (obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#upload-demo-preview').append('<img src="' + result + '" alt="' + file.name + '" style="width: 90px; height: 90px;">')
                });
            },
            done: function (res) {
                // 上传完毕
                // …
                $("#ImgUrl").val(res.imgUrl);
            }
        });
    }

    function getWanshu() { 
        roomCount = $("#SelectRoomCount").val();
        JiSuanZongjia();
        $("#roomCount").html(roomCount);
    }


    //提交订单
    function submitOrder() {
        var agree = $("#agree").prop("checked");
        if (!agree) { 
            alert("请先查阅我们酒店的协议,勾选同意.");
            return;
        }
        var userName = $("#userName").val();  // 通过Cookie取用户名 //$("#userName").val();
        var roomId1 = roomId;
        var beginTime = $("#ID-laydate-start-date-1").val();
        var endTime = $("#ID-laydate-end-date-1").val();
        var totalPrice = ZongJia;
        var price1 = price;//能用,已经在加载信息的时候给price赋过值
        var roomCount1 = roomCount;
        var phone = $("#phone").val();
        var paymentMethod = $("input[name=payment]:checked").val();
        var imgUrl = $("#ImgUrl").val();
        var isSame = $("#isSame").prop("checked");
        var teshus = [];//申明一个数组
        $("input[name=teshu]:checked").each(function (i,obj) { //取出所有被选中的特殊需求,并循环
            teshus.push($(obj).val()); //循环体内,把特殊的每一项push到数组里
        });
        var teshu = teshus.join(',');//把数组连起来赋值给 teshu 变量
        var note = $("#note").val();

        if (!userName) {
            alert("用户姓名不能为空!"); return;
        }

        if (!beginTime || !endTime) {
            alert("起始时间和离店时间都不能为空!"); return;
        }
        if (!phone) {
            alert("手机号不能为空!"); return;
        }
        if (!imgUrl) {
            alert("请上传人脸图片!"); return;
        }

        var data = {
            "id": 0,
            "userName": userName,
            "roomName": roomName,
            "orderCode": "",
            "orderTime": "2024-09-26T03:32:22.771Z",
            "roomId": roomId1,
            "beginTime": beginTime,
            "endTime": endTime,
            "totalPrice": totalPrice,
            "price": price1,
            "roomCount": roomCount1,
            "phone": phone,
            "paymentMethod": paymentMethod,
            "imgUrl": imgUrl,
            "state": 1,
            "teshu": teshu,
            "isSame": isSame,
            "note": note
        }

        console.log(data);
        $.ajax({
            url: 'https://localhost:7061/api/Order/AddOrder',
            type:'post',
            contentType:'application/json',
            data:JSON.stringify(data),
            success: function (res) { 
                if (res > 0) {
                    alert("房间预定成功!");
                } else { 
                    alert("房间预定失败!");

                }
            }
        });


    }
</script>